<template>
  <div class="box">
    <hmHead title="图片分享"></hmHead>
    <!-- Tab 标签页 -->
    <div class="main">
      <van-tabs v-model="active" sticky>
        <van-tab
          v-for="cate in ImgCategoryList"
          :key="cate.id"
          :title="cate.title"
        >
          <div
            class="content"
            v-for="img in ImagesList"
            :key="img.id"
            @click="$router.push({ path: `/ImageDetails/${img.id}` })"
          >
            <img :src="img.img_url" alt="" />
            <div class="text">
              <div class="title">
                {{ img.title }}
              </div>
              <div class="zhaiyao">
                {{ img.zhaiyao }}
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="to_top">返回顶部</div>
  </div>
</template>

<script>
import hmHead from "@/component/hm-head.vue";
import { getImgCategory, getImages } from "@/api/photos.js";
export default {
  components: {
    hmHead,
  },
  data() {
    return {
      active: 0,
      ImgCategoryList: [],
      ImagesList: [],
    };
  },
  async mounted() {
    let res = await getImgCategory();
    this.ImgCategoryList = res.data.message;
    // 数组前面最加元素
    this.ImgCategoryList.unshift({ id: 0, title: "全部" });

    let cateid = this.active;
    this.init(cateid);

    // 返回顶部
    let obtn = document.getElementsByClassName("to_top")[0];
    let timer = null;// 时间标识符
    let isTop = true;
    // 滚动条滚动时触发
    window.onscroll = function() {
      // 回到顶部过程中用户滚动滚动条，停止定时器
      if (!isTop) {
          clearInterval(timer);
      };
      isTop = false;
    };
    // 点击事件
    obtn.onclick = () =>{
      // this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行
      this.$nextTick(()=>{
          // document.documentElement.scrollTo(0,0)

          // 设置定时器
          timer = setInterval(function(){
              // 获取滚动条距离顶部高度
              let osTop = document.documentElement.scrollTop || document.body.scrollTop;
              // console.log('osTop '+osTop);
              // 减少的速度
              let ispeed = Math.floor(-osTop / 7);
              // console.log('ispeed '+ispeed);
              document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
              // 到达顶部，清除定时器
              if (osTop == 0) {
                  clearInterval(timer);
              };
              isTop = true;
          },30);
      })
    };
  },
  watch: {
    active() {
      let cateid = this.ImgCategoryList[this.active].id;
      this.init(cateid);
    },
  },
  methods: {
    init(cateid) {
      getImages(cateid).then((res) => {
        this.ImagesList = res.data.message;
      });
    },
  },
};

</script>

<style lang="less" scoped>
.box {
  margin: 0 0 60px;
  .main {
    /deep/ .van-tabs__nav{
      margin-right: 10px;
    }
    /deep/ .van-tab__text {
      color: #26a2ff;
      font-weight: 700;
    }
    /deep/ .van-tabs__line {
      background-color: #ccc;
    }
    .content {
      margin: 0 10px;
      position: relative;
      img {
        width: 100%;
      }
      .text {
        position: absolute;
        z-index: 2;
        left: 0;
        bottom: 0;
        color: #fff;
        line-height: 22px;
        padding: 5px;
        background-color:rgba(216,201,201,0.5);
        .title {
          font-weight: 700;
        }
        .zhaiyao {
          height: 46px;
          overflow: hidden;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .to_top {
    z-index: 100;
    width: 50px;
    padding: 8px;
    text-align: center;
    font-size: 18px;
    color: #26a2ff;
    border-radius: 30px;
    background-color: #fff;
    position: fixed;
    top: 80%;
    right: 5%;
  }
}
</style>